<template>
  <div class="mall">
    <van-nav-bar title="积分商城" left-arrow @click-left="onClickLeft" />
    <van-grid :column-num="3">
      <van-grid-item :key="value" text="积分: 0">
        <template #icon>
          <img src="@/assets/img/mall-1积分.png" />
        </template>
      </van-grid-item>
      <van-grid-item :key="value" text="我的订单">
        <template #icon>
          <img src="@/assets/img/mall-3我的订单.png" />
        </template>
      </van-grid-item>
      <van-grid-item :key="value" text="积分规则">
        <template #icon>
          <img src="@/assets/img/mall-2积分规则.png" />
        </template>
      </van-grid-item>
    </van-grid>
    <div class="bg"></div>
    <div class="list">
      <ul>
        <li>
          <img src="@/assets/img/mall-5.png" alt />
          <p>租房行业的秘密，带看小哥告诉你！</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              0
            </span>
            <span>市场价：10.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-6.png" alt />
          <p>包邮！免费线上抓娃娃！</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              1000
            </span>
            <span>市场价：10.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-7.png" alt />
          <p>立减：气泡果酒买一送一</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              1500
            </span>
            <span>市场价：16.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-8.png" alt />
          <p>乐蜗家纺无门槛10元店铺抵用券</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              1000
            </span>
            <span>市场价：10.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-9.png" alt />
          <p>免费领取1500积分！</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              0
            </span>
            <span>市场价：1500.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-10.png" alt />
          <p>百元顺丰快运寄件礼包</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              2000
            </span>
            <span>市场价：10.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-11.png" alt />
          <p>全棉时代礼包</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              5000
            </span>
            <span>市场价：50.00</span>
          </div>
        </li>
        <li>
          <img src="@/assets/img/mall-12.png" alt />
          <p>花加无门槛10元月卡抵用券</p>
          <div class="jf">
            <span>
              <i>
                <img src="@/assets/img/mall-4金币.png" alt />
              </i>
              1000
            </span>
            <span>市场价：10.00</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {},
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.push("/home/mine");
    },
  },
};
</script>

<style lang="less">
.mall {
  font-family: PingFang SC;
  .van-nav-bar__content {
    line-height: 36px;
    .van-icon {
      color: #000;
      font-size: 19px;
    }
    .van-nav-bar__title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  }
  .van-grid,
  .van-hairline--top {
    border: none;
    height: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #616161;
    .van-badge__wrapper {
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
  .bg {
    height: 10px;
    background: #f1f1f1;
  }
  .list {
    padding: 0 14px 0 14px;
    background: #fff;
    ul {
      display: flex;
      // flex-basis: 50%;
      flex-wrap: wrap;
      li {
        padding: 14px 0;
        flex-basis: 50%;
        &:nth-of-type(2n) {
          padding-left: 14px;
        }
        img {
          width: 158.5px;
          height: 91px;
        }
        p {
          color: #616161;
          font-size: 15px;
          line-height: 18px;
        }
        .jf {
          display: flex;
          width: 158.5px;
          justify-content: space-between;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #c4c4c4;
          span {
            line-height: 22px;
            img {
              width: 14px;
              height: 14px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
</style>
